<template>
    <div class="customer-container">
        <el-menu :default-active="active" class="menu" @select="selectHandle">
            <el-menu-item index="FrontMine">
                <el-icon>
                    <User />
                </el-icon>
                <span>账户信息</span>
            </el-menu-item>
            <el-menu-item index="FrontOrderList">
                <el-icon>
                    <Tickets />
                </el-icon>
                <span>我的订单</span>
            </el-menu-item>
            <el-menu-item index="FrontAppointmentList">
                <el-icon>
                    <Files />
                </el-icon>
                <span>体检预约</span>
            </el-menu-item>
            <el-menu-item index="FrontCustomerIm">
                <el-icon>
                    <Collection />
                </el-icon>
                <span>客服咨询</span>
            </el-menu-item>
        </el-menu>
        <div class="content"><router-view /></div>
    </div>

</template>

<script lang="ts" setup>
import { reactive, ref, Ref, getCurrentInstance } from 'vue';
import router from '../../router/index';
const { proxy } = getCurrentInstance() as any;
let active = ref('FrontMine');

//如果直接通过URL地址加载某个Vue页面，customer框架页面的菜单应该选中相关的选项
let name = router.currentRoute.value.name;
active = ref(name as string);

function selectHandle(index: string) {
    active = ref(index);
    router.push({ name: index });
}

</script>


<style lang="less" scoped>
@import url('customer.less');
</style>
